import { Tag, Modal, Popover, Button, Checkbox } from "antd";
import React, { useRef, useState } from "react";
import { PlusOutlined, EditFilled } from "@ant-design/icons";
import { useRequest } from "ahooks";
import {
  ProForm,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";

export default function Instruction() {
  const [modal, setModal] = useState({
    open: false,
    footer: false,
    onCancel: () => {
      setModal((s) => ({
        ...s,
        open: false,
      }));
    },
  });

  const { data, refresh } = useRequest(async () => {
    let list = await fetch("http://localhost:7001/api/instruction");
    list = await list.json();
    return list.data;
  });

  const showInput = () => {
    setModal((s) => ({
      ...s,
      open: true,
      title: "添加指令",
      initialValues: {},
    }));
  };

  const tagPlusStyle = {
    background: "#1677ff",
    cursor: "pointer",
    color: "#FFFFFF",
    border: "none",
  };

  const formRef = useRef();

  return (
    <div style={{ height: "100%", height: 33 }} className="flex">
      <Modal {...modal} destroyOnClose>
        <ProForm
          formRef={formRef}
          style={{ marginTop: 12 }}
          autoFocusFirstInput
          initialValues={modal?.initialValues}
          grid
          onFinish={async (value) => {
            const url =
              modal?.title === "添加指令"
                ? "http://localhost:7001/api/instruction"
                : "http://localhost:7001/api/instruction/" +
                  modal?.initialValues?.id;
            const method = modal?.title === "添加指令" ? "POST" : "PUT";
            // 定义 Fetch 请求参数
            let res = await fetch(url, {
              method: method,
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(value),
            });
            res = await res.json();
            if (res.code === 0) {
              setModal((s) => ({
                ...s,
                open: false,
              }));
              refresh();
            }
          }}
          submitter={{
            submitButtonProps: {
              style: {
                flex: 1,
              },
            },
          }}
        >
          <ProFormText
            name="name"
            label="指令名称"
            rules={[{ required: true, message: "此项为必填项" }]}
          ></ProFormText>
          <ProFormTextArea
            name={"instruction"}
            label="描述"
            fieldProps={{
              showCount: true,
              maxLength: 1000,
            }}
          ></ProFormTextArea>
        </ProForm>
      </Modal>

      {data?.map?.((item) => {
        return (
          <Popover
            key={item.id}
            content={
              <div style={{ width: 300 }}>
                {item.instruction}
                <div
                  style={{
                    display: "flex",
                    justifyContent: "flex-end",
                    alignItems: "flex-end",
                  }}
                >
                  <Button
                    icon={<EditFilled style={{ color: "#45C3FF" }} />}
                    size="small"
                    type="text"
                    onClick={() => {
                      setModal((s) => ({
                        ...s,
                        open: true,
                        title: "编辑指令",
                        initialValues: {
                          ...item,
                        },
                      }));
                    }}
                  />
                </div>
              </div>
            }
          >
            <Tag
              color="#45C3FF"
              className="center"
              closable
              style={{ cursor: "pointer" }}
              onClose={async () => {
                let res = await fetch(
                  "http://localhost:7001/api/instruction/" + item.id,
                  {
                    method: "DELETE",
                    headers: {
                      "Content-Type": "application/json",
                    },
                  }
                );
                res = await res.json();
                if (res.code === 0) {
                  refresh();
                }
              }}
            >
              <Checkbox></Checkbox>
              &nbsp;&nbsp;
              {item?.name}
            </Tag>
          </Popover>
        );
      })}
      <Tag onClick={showInput} style={tagPlusStyle} className="center">
        <PlusOutlined /> &nbsp;添加指令
      </Tag>
    </div>
  );
}
